<template>
    <q-page class="cc-admin q-pa-sm">
        <div class="col bg-white shadow-2 q-pa-md">
            <div class="row no-wrap">
                <b class="text-h6" v-if="${r"$"}q.screen.gt.md">${geForm.moduleName}</b>
                <q-space />

                <q-btn-group outline>
                    <q-btn outline icon="add" color="primary" no-wrap label="新建" @click="addCatalog()" />
                    <q-btn
                            outline
                            no-wrap
                            icon="edit"
                            :disable="selectedCatalog ===''"
                            color="primary"
                            label="修改"
                            @click="updateCatalog()"
                    />
                    <q-btn
                            :disable="selectedCatalog ===''"
                            outline
                            no-wrap
                            color="primary"
                            label="删除"
                            @click="showConfirm()"
                            icon="mdi-delete-empty"
                    />
                </q-btn-group>
            </div>
            <q-scroll-area style="height: calc(100vh - 200px);">
                <q-tree
                        ref="qTree"
                        :nodes="allCatalogList"
                        node-key="id"
                        label-key="name"
                        selected-color="primary"
                        :selected.sync="selectedCatalog"
                        default-expand-all
                />
            </q-scroll-area>
        </div>
        <cc-dialog ref="dialogCatalog" @submit="submitCatalog" :title="`${r"$"}{editType}目录`">
            <div class="col-12">
                <h5>
                    <q-icon name="star" color="red" />名称：
                </h5>
                <q-input
                        outlined
                        dense
                        autofocus
                        v-model="catalog.name"
                        type="text"
                        clearable
                        :rules="[requiredTest]"
                />
            </div>
            <div v-if="catalog.parentId !== '0'" class="col-12">
                <h5>上级目录：</h5>
                <q-input outlined readonly dense v-model="parentName" type="text" />
            </div>
            <div class="col-12">
                <h5>排序号：</h5>
                <q-input outlined dense v-model="catalog.sortOrder" type="text" />
            </div>
        </cc-dialog>
        <confirm ref="confirmDialog" :msg="confirmMsg" @confirm="delCatalog()" />
    </q-page>
</template>

<script>
import { getDictLabel } from 'boot/dictionary';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';

export default {
    name: '${geForm.className}',
    components: {
        confirm,
    },
    data() {
        return {
            checking: false,
            loading: false,
            confirmMsg: '',
            parentName: '',
            editType: '',
            selectedCatalog: '',
            selected: [],
            catalogList: [],
            allCatalogList: [],
            catalog: {
                id: 0,
                name: '',
                sortOrder: 1000,
                parentId: '0',
            },
        };
    },
    methods: {
        requiredTest,
        getDictLabel,
        initDict() {
        },
        showConfirm() {
            this.confirmMsg = '确认删除条记录吗？';
            this.${r"$"}refs.confirmDialog.show();
        },
        queryCatalog() {
            this.${r"$"}axios.get('/${requestMapping}/treeList').then(({ result }) => {
                this.catalogList = result;
        }).finally(() => {
                this.loading = false;
        });
        },
        addCatalog() {
            this.catalog.name = '';
            if (this.selectedCatalog) {
                this.catalog.parentId = this.selectedCatalog;
                const parentNode = this.${r"$"}refs.qTree.getNodeByKey(this.catalog.parentId);
                this.parentName = parentNode.name;
            } else {
                this.catalog.parentId = '0';
            }
            this.editType = '新建';
            this.${r"$"}refs.dialogCatalog.show();
        },
        updateCatalog() {
            this.editType = '修改';
            this.loading = true;
            this.${r"$"}axios.get(`/${requestMapping}/queryById?id=${r"$"}{this.selectedCatalog}`).then(({ result }) => {
                this.catalog = result;
            const parentNode = this.${r"$"}refs.qTree.getNodeByKey(this.catalog.parentId);
            this.parentName = parentNode ? parentNode.name : '';
        }).finally(() => {
                this.loading = false;
        });
            this.${r"$"}refs.dialogCatalog.show();
        },
        submitCatalog() {
            this.loading = true;
            let a;
            const param = { ...this.catalog };
            if (this.editType === '修改') {
                a = this.${r"$"}axios.put('/${requestMapping}/edit', param);
            } else {
                a = this.${r"$"}axios.post('/${requestMapping}/add', param);
            }
            a.then((r) => {
                this.${r"$"}info(r.message);
            this.${r"$"}refs.dialogCatalog.hide();
        }).finally(() => {
                this.queryCatalog();
        });
        },
        delCatalog() {
            this.${r"$"}axios.delete(`/${requestMapping}/delete?id=${r"$"}{this.selectedCatalog}`).then((r) => {
                this.${r"$"}info(r.message);
        }).finally(() => {
                this.queryCatalog();
        });
        },
    },
    watch: {
        catalogList: {
            handler() {
                this.allCatalogList = [{
                    id: '',
                    name: '全部',
                    children: this.catalogList,
                }];
                this.${r"$"}nextTick(() => {
                    this.${r"$"}refs.qTree.expandAll();
            });
            },
        },
    },
    mounted() {
        this.queryCatalog();
    },
};
</script>

<style lang="stylus"></style>
